<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { cloneDeep } from 'lodash'
import { onMounted, ref, reactive, onBeforeUnmount, watch } from 'vue'
let myChart = null
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
})
// const echartLegendData = [
//   {
//     name: '无旱',
//     value: '1000',
//     percentage: '24.39',
//   },
//   {
//     name: '轻旱',
//     value: '1000',
//     percentage: '24.39',
//   },
//   {
//     name: '中旱',
//     value: '1000',
//     percentage: '24.39',
//   },
//   {
//     name: '重旱',
//     value: '1000',
//     percentage: '24.39',
//   },
//   {
//     name: '特旱',
//     value: '100',
//     percentage: '2.44',
//   },
// ]
const propsCopy = reactive({
  data: cloneDeep(props.data),
})
const option = ref({
  color: [
    '#4CE600',
    '#FFFFBD',
    '#ECEC1B',
    '#FFA77F',
    '#FD0100',
    'skyblue',
    'pink',
  ],
  // title: {
  //   text: 'XXX干旱指数面积统计(VCI)',
  //   left: 'center',
  //   top: 20,
  // },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true,
      },
    },
    formatter: function (params) {
      // 保留原有的 tooltip 样式，插入百分号并返回格式化后的 tooltip 内容
      var tooltipText = params.marker + params.name + ': ' + params.value + '%'
      return tooltipText
    },
  },
  legend: {
    // orient: 'vertical',
    left: '55%',
    top: '5%',
    itemWidth: 18, // 设置图例方块的宽度
    itemHeight: 10, // 设置图例方块的高度
    textStyle: {
      color: '#ffffff',
      fontSize: 12,
    },
    formatter: (name) => {
      // let target
      // echartLegendData.forEach((item, index) => {
      //   if (name == item.name) {
      //     target = item
      //   }
      // })
      // return `${name}    ${target.value}Km²      ${target.percentage}%`
      return `${name}`
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      center: ['45%', '50%'],
      radius: ['40%', '70%'],
      right: '35%',
      itemStyle: {
        borderRadius: 5,
        // borderColor: '#fff',
        // borderWidth: 2,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        show: true,
        formatter: '{c}%',
        textStyle: {
          fontSize: 13,
          color: '#fff',
        },
      },
      labelLine: {
        // show: false,
      },
      data: props.data,
    },
  ],
})

function _clearInterval(timeId) {
  timeId && window.clearInterval(timeId)
}
const resizeHandler = () => {
  myChart.resize()
}
const chart = ref()
const timer1 = ref(null)
const initCharts = () => {
  chart.value.removeAttribute('_echarts_instance_')
  myChart = echarts.init(chart.value)
  myChart.setOption(option.value)
  window.addEventListener('resize', resizeHandler)
}
watch(
  () => props,
  (newValue, oldValue) => {
    propsCopy.data = cloneDeep(newValue.data)
    myChart.setOption({
      series: [
        {
          data: propsCopy.data,
        },
      ],
    })
  },
  { deep: true }
)
onMounted(() => {
  initCharts()
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})
defineExpose({
  initCharts,
  props,
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
